<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--suppress ALL-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>领养中心|蜗牛宠物领养平台</title>

    <link rel="shortcut icon" th:href="@{/asserts/images/favicon.ico}" type="image/x-icon"/>
    <!-- Bootstrap的css -->
    <link rel="stylesheet" th:href="@{/asserts/bootstrap3.4.1/css/bootstrap.min.css}">
    <!-- jQuery本地-->
    <script th:src="@{/asserts/js/jQuery-3.6.0.js}"></script>
    <!-- 加载本地js -->
    <script th:src="@{/asserts/bootstrap3.4.1/js/bootstrap.min.js}"></script>
    <!-- 加载common.css -->
    <link rel="stylesheet" th:href="@{/asserts/css/common.css}"/>
    <!-- 加载页头页尾css -->
    <link rel="stylesheet" th:href="@{/asserts/css/top.css}"/>
    <link rel="stylesheet" th:href="@{/asserts/css/foot.css}"/>
    <!-- 加载页头页尾js -->
    <script th:src="@{/asserts/js/top.js}"></script>
</head>
<body>
<!-- 页头 -->
<nav th:replace="nav::headerBar"></nav>
<div class="container" style="width: 1000px;height: 400px;">
    <div style="height: 100%;width:50%;float: left;text-align: center;padding-top:50px; ">
        <img th:src="'https://woniu-adopt.oss-cn-hangzhou.aliyuncs.com/adoptImages/'+${pet.image}"
             style="width: 300px;height:300px;">
    </div>
    <div style="height: 100%;width:50%;float: left;padding-top:30px;padding-left: 30px;padding-right: 30px; ">
        <span style="font-size: 30px;">宠物名:</span><span th:text="${pet.name}" style="font-size: 30px;"></span>
        <br>
        <span style="font-size: 20px;">性别:</span>
        <span style="font-size: 20px;" th:if="${pet.sex}==1">雄性</span>
        <span style="font-size: 20px;" th:if="${pet.sex}==2">雌性</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span style="font-size: 20px;">种类:</span>
        <span style="font-size: 20px;" th:if="${pet.category}==1">猫</span>
        <span style="font-size: 20px;" th:if="${pet.category}==2">狗</span>
        <br><br>
        <span style="font-size: 15px;">编号:</span>
        <span style="font-size: 15px;" th:text="${pet.id}"></span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <span style="font-size: 15px;">救助站名:</span>
        <span style="font-size: 15px;" th:text="${rescueStation.name}"></span>
        <br><br>
        <h5 style="display: inline;">地址:</h5>
        <h5 style="display: inline;" th:if="${session.loginUser.id}!=0" th:text="${rescueStation.address}"></h5>
        <h5 style="display: inline;color:red;" th:if="${session.loginUser.id}==0">登录后显示救助站地址</h5>
        <br><br>
        <h5 style="display: inline;">宠物介绍:</h5><h5 style="display: inline;" th:text="${pet.introduce}"></h5>
        <br><br>
        <h5 style="display: inline;">联系电话:</h5>
        <h5 style="display: inline;" th:if="${session.loginUser.id}!=0" th:text="${rescueStation.telephone}"></h5>
        <h5 style="display: inline; color:red;" th:if="${session.loginUser.id}==0" >登录后显示联系方式 <a
                th:href="@{/login.html?1}" style="color:blue;">点此登录</a></h5>
        <br><br>
        <h5 style="display: inline;">游览量:</h5>
        &nbsp;
        <h5 style="display: inline;" th:text="${pet.views}"></h5>
        <br><br>
        <button type="button" class="btn btn-primary btn-sm" style="margin-left: 20px;"
                onclick="back()">返回中心
        </button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <!--<button type="button" class="btn btn-success btn-lg"
                data-toggle="modal" data-target="#myModal">想要领养</button>-->

        <button type="button" class="btn btn-success btn-sm" onclick="adopt()">想要领养</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-warning btn-sm" onclick="collection()">收藏</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <!--thymeleaf绑定事件-->
        <button type="button" class="btn btn-success btn-sm" th:onclick="openForm()">留言板</button>
        <!-- 评论区Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">评论 : </h4>
                    </div>
                    <div class="modal-body">
                        <table class="table table-striped table-condensed" id="myTable">
                            <tr>
                                <td>评论人</td>
                                <td>时间</td>
                                <td>内容</td>
                                <td>回复</td>
                            </tr>
                        </table>
                    </div>

                    <form id="myform">
                        <div class="modal-body">
                            <input type="text" class="pid" id="pid" name="pid" th:value="${pet.id}" hidden>
                            <input type="text" class="uid" id="uid" name="uid" th:value="${session.loginUser.id}" hidden>
                            <textarea name="context" type="text" style="width: 570px; height: 50px; "
                                      placeholder="请发表评论！"></textarea>
                        </div>
                    </form>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" th:onclick="save()">评论</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
<!--        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">-->
<!--            <div class="modal-dialog" role="document">-->
<!--                <div class="modal-content">-->
<!--                    <div class="modal-header">-->
<!--                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span-->
<!--                                aria-hidden="true">&times;</span></button>-->
<!--                        <h4 class="modal-title" id="myModalLabel">领养申请</h4>-->
<!--                    </div>-->
<!--                    <div class="modal-body">-->
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-2 control-label">领养人:</label>-->
<!--                            <div class="col-sm-10">-->
<!--                                <input type="text" class="form-control">-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-2 control-label">宠物名:</label>-->
<!--                            <div class="col-sm-10">-->
<!--                                <input th:value="${pet.name}" class="form-control" disabled>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-2 control-label">性别:</label>-->
<!--                            <div class="col-sm-10">-->
<!--                                <input type="text" class="form-control">-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-2 control-label">电话:</label>-->
<!--                            <div class="col-sm-10">-->
<!--                                <input type="text" class="form-control">-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-2 control-label">邮件:</label>-->
<!--                            <div class="col-sm-10">-->
<!--                                <input type="email" class="form-control">-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-2 control-label">地址:</label>-->
<!--                            <div class="col-sm-10">-->
<!--                                <input type="text" class="form-control">-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="modal-footer">-->
<!--                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->
<!--                        <button type="button" class="btn btn-primary">提交申请</button>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->

    </div>
</div>


<!-- 页尾 -->
<footer th:replace="nav::footBar"></footer>
</body>
<script>
    function back() {
        window.history.back();
    }

    function adopt() {
        let pid = '[[${pet.id}]]';
        let uid = '[[${session.loginUser.id}]]';
        let url = '[[@{/pet/adopt}]]';
        if (uid == 0) {
            alert("请先登录！！！");
            return;
        }
        $.ajax({
            url: url,
            data: {
                uid: uid,
                pid: pid
            },
            type: 'get',
            dataType: 'text',
            success: function (res) {
                console.log(res);
                if (res == 1) {
                    alert("申请成功");
                } else {
                    alert("申请失败，请勿重复申请");
                }
            },
            error: function (xhr, errorMessage, e) {
                alert("申请失败,系统错误");
            }
        })
    }

    function collection() {
        let pid = '[[${pet.id}]]';
        let uid = '[[${session.loginUser.id}]]';
        let url = '[[@{/pet/collection}]]';
        if (uid == 0) {
            alert("请先登录！！！");
            return;
        }
        $.ajax({
            url: url,
            data: {
                uid: uid,
                pid: pid
            },
            type: 'get',
            dataType: 'text',
            success: function (res) {
                console.log(res);
                if (res == 1) {
                    alert("收藏成功");
                } else {
                    if (confirm("你已经收藏过了！是否要取消收藏？")) {
                        collectionDel();
                    }
                }
            },
            error: function (xhr, errorMessage, e) {
                alert("收藏失败,系统错误");
            }
        })
    }

    function collectionDel() {
        let pid = '[[${pet.id}]]';
        let uid = '[[${session.loginUser.id}]]';
        let url = '[[@{/pet/collectionDel}]]';
        $.ajax({
            url: url,
            data: {
                uid: uid,
                pid: pid
            },
            type: 'get',
            dataType: 'text',
            success: function (res) {
                if (res == 1) {
                    alert("取消收藏成功！");
                } else {
                    alert("取消收藏失败，请稍后操作！");
                }
            },
            error: function (xhr, errorMessage, e) {
                alert("操作失败,系统错误");
            }
        })
    }
//    评论区
    function openForm() {
        let pid = '[[${pet.id}]]';

        $.ajax({
            url: '[[@{/comment/getCommentByKey}]]',
            data: {
                "id": pid
            },
            type: "get",
            dataType: "json",
            success: function (obj) {
                //console.log(obj)
                $("#myTable  tr:not(:first)").html("");
                if (obj == null || obj == "") {
                } else {
                    for (a of obj) {
                        $("tr:last").after(`
                                <tr>
                                    <td style="color: skyblue">` + a.userName + `</td>
                                    <td>` + a.insertTime + `</td>
                                    <td>` + a.message + `</td>
                                    <td>` + a.answerUser + `</td>
                                </tr>
                           `);
                    }
                }

            }
        });
        // document.getElementById("pid").value=id;
        // console.log(id)
        $('#myModal').modal("show");
    }
    //提交修改，返回是否修改成功
    function save() {
        console.log($("#myform").serialize());
        let uid = '[[${session.loginUser.id}]]';
        if (uid == 0) {
            alert("请先登录！！！");
            $("#myModal").modal('hide');
            return;
        }
        $.ajax({
            url: '[[@{/comment/save}]]',
            data: $("#myform").serialize(),
            type: "post",
            success: function (msg) {
                if (msg == "ok") {
                    $("#myModal").modal('hide');
                    // location.href = "manager?op=showAllUser";
                    //原地刷新
                    location.reload();
                } else {
                    alert("---对不起，评论失败！---");
                }

            }
        })
    }
</script>
</html>